<template>

  <div>

    <!-- 广告图位置 -->
    <div class="header">
      <img src="../assets/image/header/header.png" alt="">
    </div>
    <!-- 搜索位置 -->
    <div>
      <van-search
        v-model="value"
        shape="round"
        background="white"
        placeholder="请输入搜索关键词" disabled
        @click="$router.push('/home/searchpopup')"
      />
      
      
    </div>
    
<!-- 通知 -->
<div>
  <router-link to="/car_list" >
    <van-notice-bar scrollable text="请先选择您的爱车" />
  </router-link>
</div>

<!-- 顶部导航 -->
<van-tabs >
  <van-tab title="爆款热卖" name="a">
    <!-- 轮播图位置 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white" height="210px">
        <van-swipe-item v-for="item in banner" :key="item.bid"> 
          <img :src="require(`@/assets${item.img}`)" width="100%" alt="">
        </van-swipe-item>
</van-swipe>
    </div>
  
<!-- 轮胎打折 -->
<div class="luntai">
  <img src="../assets/image/index/luntaidazhe.webp" alt="">
</div>
<!--拼团购  -->
<div>
  <van-notice-bar color="#999" background="#ecf9ff" left-icon="info-o">
  拼团购
</van-notice-bar>
</div>
<!-- 商品列表 -->
<div>
  <van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>
</div>

<!-- 天天秒杀 -->
<div>
  <van-notice-bar color="#999" background="#ecf9ff" left-icon="info-o">
  天天秒杀
</van-notice-bar>
<div>
  <van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>
</div>


</div>
<!-- 图片 -->
<div class="xingche">
  <van-row type="flex" justify="space-around">
  <van-col span="6"><img src="../assets/image/index/x_01.png" alt=""></van-col>
  <van-col span="6"><img src="../assets/image/index/x_02.png" alt=""></van-col>
  <van-col span="6"><img src="../assets/image/index/x_03.png" alt=""></van-col>
</van-row>
<van-row type="flex" justify="space-around">
  <van-col span="6"><img src="../assets/image/index/x_04.png" alt=""></van-col>
  <van-col span="6"><img src="../assets/image/index/x_05.png" alt=""></van-col>
  <van-col span="6"><img src="../assets/image/index/x_06.png" alt=""></van-col>
</van-row>
</div>
<!-- 猜你喜欢 -->
<div>
  <van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>
</div>
<!-- 倒计时 -->
<div class="backtime">
  <van-count-down :time="time" class="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</van-count-down>
</div>
  </van-tab>
  <van-tab title="限时秒杀" name="b">
    
  </van-tab>
  <van-tab title="门店" name="c">
    <van-tree-select
  :items="items"
  :active-id.sync="activeId"
  :main-active-index.sync="activeIndex"
/></van-tab>
</van-tabs>

<!-- 底部导航栏 -->
<div>
 <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" replace to="/">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o" >标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o" replace to="/me">我的</van-tabbar-item>
  
</van-tabbar>
</div>
<transition name="van-slide-right">
        <router-view></router-view>
      </transition>
  </div>

</template>


<script>
import { Toast } from 'vant';
import axios from 'axios';
//import request from '@/request/request'
import {GetHomeList} from "@/request/api"
export default {
  name:'Home',
  data() {
    return {
      banner:[],
       active: 0,
      value: '',
      time: 30 * 60 * 60 * 1000,
      activeId: 1,
      activeIndex: 0,
      items: [{ text: '安驰', children: [{text: '雪豹',id: 1},{text: '小公主',id: 2,},] }, 
      { text: '分组 2' },{ text: '分组 3' }],
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },

  },
  created () {
    GetHomeList().then(res=>{
        console.log(res)
        this.banner=res.data
        console.log(this.banner)
    }).catch(err=>{
      console.log(err)
    })
  },

};
</script> 

<style scoped>
.header{
  width: 100%;
 
}
.header>img{
  width: 100%;
}
.my-swipe{
 height: 210px;
  
}
.banner img{
  
}
.luntai>img{
  width: 375px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .my-swipe>img{
    width: 100%;
  }
  /* 倒计时 */
  .backtime{
    height: 44px;
  }
  .backtime>.time{
    float: right;
  }
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  /* 行车记录 */
  .xingche img{
    width: 124px;
    height: 150px;
  }
  /* .slide-enter,.slide-leave-to{
    过度开始之前的样式写在这里
   right: -100%;
  }
  .slide-enter-active,.slide-leave-active{
     过度属性写在这里 
  transition: right .3s;
  }
  .slide-enter-to,.slide-leave{
     过度结束之后的样式写在这里 
     right: 0;
  } */
</style>